<template>
  <div id="zhong">
<div id='jindutext'>当前进度完成{{jindu}}%</div>
<div @click="f" id="shishi"></div>
  <van-circle
  id="caiji"
  v-model="currentRate"
  :rate="rate"
  :stroke-width="100"
  :text="caitext"
  size="70px"
/>



    <img :src="a1" id="shu1" v-if='at1' style="width:20%; height:15vh" />  
    <img :src="a2" id="shu2" v-if='at2' style="width:40%; height:32vh"/>
    <img :src="a3" id="shu3" v-if='at3' style="width:45%; height:38vh" />
    <img :src="a4" id="shu4" v-if='at4' style="width:65%; height:50vh "/>
  <div id="jindutiao">
    <van-progress pivot-text="进度" color="#f2826a" :percentage="jindu" />
  </div>
    <div :border="false" id="buju">
      <div class="bu_a">
        <img src="../assets/shuihuwei.png" class="shuihu" />
        <p>55</p>
        <p>当前排名</p>
      </div>
      <div class="bu_a">
        <img src="../assets/shuihuwei.png" class="shuihu" />
        <p>{{ SUM }}</p>
        <p>当前能量累计</p>
      </div>
      <div class="bu_a">
        <img src="../assets/shuihuwei.png" class="shuihu" @click="b" />
        <p id="neng">{{ YU }}</p>
        <p>能量数</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
  //能量采集
   currentRate: 0,
   rate:0,
   caitext:"采集中",


   jindu:20.3,
   jin:0,
    at1:false,
    at2:false,
    at3:false,
    at4:false,

      B1:'https://cdn.jsdelivr.net/gh/hututu-tech/IMG-gongfeng@main/2022/05/04/6271e5d9761d2.jpg',
      a1:'https://cdn.jsdelivr.net/gh/hututu-tech/IMG-gongfeng@main/2022/05/09/627865c6eb158.png',
      a2:'https://cdn.jsdelivr.net/gh/hututu-tech/IMG-gongfeng@main/2022/05/09/62786768dea11.png',
      a3:'https://cdn.jsdelivr.net/gh/hututu-tech/IMG-gongfeng@main/2022/05/09/627867c03030c.png',
      a4:'https://cdn.jsdelivr.net/gh/hututu-tech/IMG-gongfeng@main/2022/05/09/6278682b15d5d.png',
      ID: 0,
      //记录总共获取的能量
      SUM: 0,
      //记录使用过的能量
      YONG: 0,
    };
  },
  created() {
    this.ID = parseInt(localStorage.getItem("id"));
    this.a();
    // this.e();
    this.setTimer();
  },
  methods: {
    a() {
      var _that = this;
      let id = parseInt(localStorage.getItem("id"));
      axios
        .get("/api/vue_admID?id=" + id)
        .then((res) => {
          console.log(res.data.message[0]);
          this.SUM = res.data.message[0].fenSum;
          this.YONG = res.data.message[0].fenJIAN;
          this.jin=(this.YONG/40)*100
          if(this.jin<=100){
            this.jindu=this.jin
          }
          else{
            this.jindu=100
          }
          this.e();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    b() {
      this.e();
      if (this.YONG < this.SUM) {
        let fenJIAN = this.YONG + 1;
        let id = this.ID;
        axios
          .get("/api/vue_admSUM?id=" + id + "&fenJIAN=" + fenJIAN)
          .then((res) => {
            console.log(res.data.J[0].fenJIAN);
            this.YONG = res.data.J[0].fenJIAN;

             this.jin=(this.YONG/40)*100
          if(this.jin<=100){
            this.jindu=this.jin
              }
          else{
            this.jindu=100
          }

          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        Toast({
          message: "没有能量了",
          icon: "https://cdn.jsdelivr.net/gh/hututu-tech/IMG-gongfeng@main/2022/05/04/6272124296c59.png",
        });
      }
    },

    e(){
  if(this.YONG<10){
    this.at1=true,
    this.at2=false,
    this.at3=false,
    this.at4=false
  }
 if(this.YONG>=10&&this.YONG<20){
    this.at2=true,
    this.at1=false,
    this.at3=false,
    this.at4=false
  }
   if(this.YONG>=20&&this.YONG<30){
    this.at3=true,
    this.at2=false,
    this.at1=false,
    this.at4=false
  }
   if(this.YONG>=30){
    this.at4=true,
    this.at2=false,
    this.at3=false,
    this.at1=false
  }

    },
    f(){
  if(this.rate>=100){
      this.rate=0
      let id=this.ID
      let tm=this.SUM+1
        axios
          .get("/api/vue_admZong?id="+id + "&tm="+tm)
          .then((res) => {
              Toast({
                message:'完成采集'
              })
            history.go(0)
          })
          .catch((err) => {
            console.log(err);
          });
          
  }
    },
    setTimer() {
             
                  setInterval( () => {
                    if(this.rate>100){
                      this.rate=100
                      this.caitext="采集完成"
                    }
                      this.rate++
                    }, 100)
               
               
            }
  },
  computed: {
    YU() {
      return this.SUM - this.YONG;
    },
  },
};
</script>

<style scoped>

*{
margin: 0;
padding: 0;
} 

#jindutext{
  position:absolute;
  left: 35vw;
  bottom: 13vh;
  color: aliceblue;
}

#caiji{
  position: absolute;
  top: 28vh;
  left: 4vw;
  z-index: 1;
}

#shishi{
   position: absolute;
  top: 28vh;
  left: 4vw;
  width: 75px;
  height: 75px;
  z-index: 2;
}



#jindutiao{
  width: 60%;
  position:absolute;
  bottom: 150px;
  left: 21%;
}

.van-progress{
  height: 22px;
  border-radius: 10px;
}

>>>.van-progress__pivot{
  display: none;
 
}




#zhong {
  border: 2px solid red;
  width: 100vw;
  height: 100vh;
  background-image: url(../assets/caoyuan.jpg);
  background-size: 130vw;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  z-index: -999;
}

#buju {
  position: absolute;
  bottom: 0px;
  width: 100vw;
  height: 140px;
  display: flex;
}

.bu_a{
  flex:1;
  text-align: center;
  color: rgb(249, 246, 246);
  font-size: 20px;
  
}

.shuihu {
  width: 100px;
  height: 100px;
  /* position:absolute; */

}
  #neng {
    font-size: 20px;
    color: rgb(24, 233, 52);
  }

#shu1{
 
  position: absolute;
  bottom: 190px;
  left: 42%;
}


#shu2{
 
  position: absolute;
  bottom: 105px;
  left: 32%;
}
#shu3{
 
  position: absolute;
  bottom: 190px;
  left: 37%;
}
#shu4{
 
  position: absolute;
  bottom: 180px;
  left: 20%;
}
</style>